<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火焰弹球打砖块游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            user-select: none;
        }
        
        .game-container {
            width: 800px;
            max-width: 100vw;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        /* 顶部信息栏 */
        .info-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: #333;
            color: white;
            font-size: 16px;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .hearts {
            letter-spacing: 2px;
        }
        
        /* 游戏区域 */
        .game-area {
            position: relative;
            width: 100%;
            height: 600px;
            background-color: #1a1a2e;
            overflow: hidden;
            cursor: none;
        }
        
        /* 球 */
        #ball {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #3498db;
            transform: translate(-50%, -50%);
            transition: none;
            z-index: 2;
        }
        
        /* 火焰球效果 */
        #ball.fire-effect {
            background: linear-gradient(45deg, #FFEB3B, #FF9800, #F44336);
            box-shadow: 0 0 15px #FF9800, 0 0 30px #F44336;
            animation: pulse 0.3s infinite alternate;
        }
        
        @keyframes pulse {
            from { transform: translate(-50%, -50%) scale(1); }
            to { transform: translate(-50%, -50%) scale(1.1); }
        }
        
        /* 挡板 */
        #paddle {
            position: absolute;
            width: 100px;
            height: 20px;
            background-color: #e74c3c;
            border-radius: 10px;
            bottom: 20px;
            transform: translateX(-50%);
            z-index: 3;
        }
        
        /* 砖块 */
        .brick {
            position: absolute;
            width: 90px;
            height: 30px;
            border-radius: 5px;
            z-index: 1;
            transition: all 0.2s ease;
        }
        
        .brick.hit {
            transform: scale(0);
            opacity: 0;
        }
        
        /* 底部控制栏 */
        .control-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: #2c3e50;
            color: white;
        }
        
        .control-btn {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .control-btn:hover {
            background-color: #2980b9;
        }
        
        .control-btn:disabled {
            background-color: #7f8c8d;
            cursor: not-allowed;
        }
        
        /* 游戏覆盖层 */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        
        .overlay-content {
            text-align: center;
            color: white;
        }
        
        .overlay-content h2 {
            font-size: 36px;
            margin-bottom: 20px;
            text-shadow: 0 0 10px #ff6b6b;
        }
        
        .overlay-content p {
            font-size: 18px;
            margin-bottom: 10px;
        }
        
        .new-record {
            color: #FFD700;
            font-weight: bold;
            font-size: 24px;
            animation: glow 1s ease-in-out infinite alternate;
        }
        
        @keyframes glow {
            from { text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700; }
            to { text-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700, 0 0 40px #FFD700; }
        }
        
        .start-btn {
            margin-top: 20px;
            padding: 15px 30px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            transition: all 0.3s;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .start-btn:hover {
            background-color: #c0392b;
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        
        /* 粒子效果 */
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 5;
        }
        
        /* 响应式设计 */
        @media (max-width: 820px) {
            .game-container {
                width: 100%;
                height: 100vh;
                max-width: none;
                border-radius: 0;
            }
            
            .game-area {
                height: calc(100vh - 130px);
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <!-- 顶部信息栏 -->
        <div class="info-bar">
            <div class="info-item">
                <span class="label">得分：</span>
                <span class="value" id="score">0</span>
            </div>
            <div class="info-item">
                <span class="label">生命值：</span>
                <span class="hearts" id="lives">❤️❤️❤️</span>
            </div>
            <div class="info-item">
                <span class="label">本地最高分：</span>
                <span class="value" id="high-score">0</span>
            </div>
        </div>
        
        <!-- 游戏区域 -->
        <div class="game-area" id="game-area">
            <!-- 球 -->
            <div id="ball"></div>
            
            <!-- 挡板 -->
            <div id="paddle"></div>
            
            <!-- 砖块将通过JS动态生成 -->
            <div id="bricks-container"></div>
            
            <!-- 游戏开始界面 -->
            <div id="start-overlay" class="overlay">
                <div class="overlay-content">
                    <h2>火焰弹球打砖块</h2>
                    <p>使用鼠标或键盘方向键控制挡板</p>
                    <p>空格键暂停/继续，回车键开始游戏</p>
                    <button class="start-btn" id="start-btn">开始游戏</button>
                </div>
            </div>
            
            <!-- 游戏结束界面 -->
            <div id="game-over-overlay" class="overlay" style="display: none;">
                <div class="overlay-content">
                    <h2>游戏结束！</h2>
                    <p>你的得分：<span id="final-score">0</span></p>
                    <p id="record-message" class="new-record" style="display: none;">新纪录！🏆</p>
                    <button class="start-btn" id="restart-btn">重新开始</button>
                </div>
            </div>
        </div>
        
        <!-- 底部控制栏 -->
        <div class="control-bar">
            <button class="control-btn" id="restart-game-btn">🔄 重新开始</button>
            <button class="control-btn" id="pause-btn" disabled>⏸️ 暂停</button>
            <div class="instructions">
                鼠标/键盘←→控制挡板
            </div>
        </div>
    </div>

    <script>
        // 游戏状态
        const gameState = {
            score: 0,
            lives: 3,
            highScore: 0,
            isPaused: false,
            isGameStarted: false,
            isGameOver: false,
            isNewRecord: false,
            
            // 游戏元素
            ball: {
                x: 0,
                y: 0,
                radius: 10,
                dx: 4,
                dy: -4
            },
            paddle: {
                x: 0,
                width: 100,
                height: 20
            },
            bricks: [],
            brickWidth: 90,
            brickHeight: 30,
            brickRows: 5,
            brickCols: 8,
            brickPadding: 5,
            brickOffsetTop: 60,
            brickOffsetLeft: 35,
            
            // 火焰特效
            isFireMode: false,
            fireModeTimer: 0,
            
            // 游戏区域尺寸
            gameWidth: 800,
            gameHeight: 600,
            
            // 控制状态
            leftPressed: false,
            rightPressed: false,
            
            // 游戏循环
            gameLoopId: null
        };

        // DOM元素
        const elements = {
            gameArea: document.getElementById('game-area'),
            ball: document.getElementById('ball'),
            paddle: document.getElementById('paddle'),
            bricksContainer: document.getElementById('bricks-container'),
            scoreDisplay: document.getElementById('score'),
            livesDisplay: document.getElementById('lives'),
            highScoreDisplay: document.getElementById('high-score'),
            startOverlay: document.getElementById('start-overlay'),
            gameOverOverlay: document.getElementById('game-over-overlay'),
            startBtn: document.getElementById('start-btn'),
            restartBtn: document.getElementById('restart-btn'),
            restartGameBtn: document.getElementById('restart-game-btn'),
            pauseBtn: document.getElementById('pause-btn'),
            finalScoreDisplay: document.getElementById('final-score'),
            recordMessage: document.getElementById('record-message')
        };

        // 初始化游戏
        function initGame() {
            // 设置游戏尺寸
            updateGameDimensions();
            window.addEventListener('resize', updateGameDimensions);
            
            // 加载最高分
            loadHighScore();
            
            // 初始化砖块
            initializeBricks();
            
            // 重置球和挡板
            resetBallAndPaddle();
            
            // 绑定事件
            bindEvents();
            
            // 渲染初始状态
            render();
        }

        // 更新游戏尺寸
        function updateGameDimensions() {
            gameState.gameWidth = elements.gameArea.offsetWidth;
            gameState.gameHeight = elements.gameArea.offsetHeight;
            resetBallAndPaddle();
        }

        // 重置球和挡板
        function resetBallAndPaddle() {
            gameState.paddle.x = gameState.gameWidth / 2;
            gameState.ball.x = gameState.gameWidth / 2;
            gameState.ball.y = gameState.gameHeight - 50;
            gameState.ball.dx = 4;
            gameState.ball.dy = -4;
            gameState.isFireMode = false;
            gameState.fireModeTimer = 0;
            
            // 更新UI
            elements.ball.classList.remove('fire-effect');
        }

        // 加载最高分
        function loadHighScore() {
            try {
                const saved = localStorage.getItem('flameBreakoutHighScore');
                gameState.highScore = saved ? parseInt(saved, 10) : 0;
                elements.highScoreDisplay.textContent = gameState.highScore;
            } catch (e) {
                console.error('无法加载最高分:', e);
                gameState.highScore = 0;
                elements.highScoreDisplay.textContent = '0';
            }
        }

        // 保存最高分
        function saveHighScore() {
            try {
                if (gameState.score > gameState.highScore) {
                    gameState.highScore = gameState.score;
                    localStorage.setItem('flameBreakoutHighScore', gameState.highScore.toString());
                    elements.highScoreDisplay.textContent = gameState.highScore;
                    gameState.isNewRecord = true;
                }
            } catch (e) {
                console.error('无法保存最高分:', e);
            }
        }

        // 初始化砖块
        function initializeBricks() {
            // 清空现有砖块
            gameState.bricks = [];
            elements.bricksContainer.innerHTML = '';
            
            const colors = ['#FF5252', '#FF7043', '#FFA726', '#FFEE58', '#66BB6A', '#42A5F5', '#7E57C2', '#EC407A'];
            
            for (let r = 0; r < gameState.brickRows; r++) {
                for (let c = 0; c < gameState.brickCols; c++) {
                    const brickX = c * (gameState.brickWidth + gameState.brickPadding) + gameState.brickOffsetLeft;
                    const brickY = r * (gameState.brickHeight + gameState.brickPadding) + gameState.brickOffsetTop;
                    const color = colors[Math.floor(Math.random() * colors.length)];
                    
                    // 创建砖块DOM元素
                    const brickElement = document.createElement('div');
                    brickElement.classList.add('brick');
                    brickElement.style.left = `${brickX}px`;
                    brickElement.style.top = `${brickY}px`;
                    brickElement.style.backgroundColor = color;
                    
                    // 添加到容器
                    elements.bricksContainer.appendChild(brickElement);
                    
                    // 存储砖块数据
                    gameState.bricks.push({
                        x: brickX,
                        y: brickY,
                        status: 1,
                        color: color,
                        element: brickElement
                    });
                }
            }
        }

        // 开始游戏
        function startGame() {
            if (gameState.isGameOver) {
                // 重置游戏状态
                gameState.score = 0;
                gameState.lives = 3;
                gameState.isGameOver = false;
                gameState.isNewRecord = false;
                gameState.isGameStarted = false;
                initializeBricks();
                
                // 更新UI
                elements.scoreDisplay.textContent = '0';
                elements.livesDisplay.textContent = '❤️❤️❤️';
                elements.gameOverOverlay.style.display = 'none';
            }
            
            gameState.isGameStarted = true;
            gameState.isPaused = false;
            elements.startOverlay.style.display = 'none';
            elements.pauseBtn.disabled = false;
            elements.pauseBtn.textContent = '⏸️ 暂停';
            
            // 开始游戏循环
            startGameLoop();
        }

        // 重新开始游戏
        function restartGame() {
            // 停止当前游戏循环
            if (gameState.gameLoopId) {
                cancelAnimationFrame(gameState.gameLoopId);
            }
            
            // 重置所有状态
            gameState.score = 0;
            gameState.lives = 3;
            gameState.isGameOver = false;
            gameState.isGameStarted = false;
            gameState.isPaused = false;
            gameState.isNewRecord = false;
            
            // 重新初始化
            initializeBricks();
            resetBallAndPaddle();
            
            // 更新UI
            elements.scoreDisplay.textContent = '0';
            elements.livesDisplay.textContent = '❤️❤️❤️';
            elements.startOverlay.style.display = 'block';
            elements.gameOverOverlay.style.display = 'none';
            elements.pauseBtn.disabled = true;
            elements.pauseBtn.textContent = '⏸️ 暂停';
        }

        // 切换暂停状态
        function togglePause() {
            if (!gameState.isGameStarted || gameState.isGameOver) return;
            
            gameState.isPaused = !gameState.isPaused;
            elements.pauseBtn.textContent = gameState.isPaused ? '▶️ 继续' : '⏸️ 暂停';
        }

        // 游戏循环
        function startGameLoop() {
            function gameLoop() {
                if (!gameState.isPaused && !gameState.isGameOver) {
                    update();
                    render();
                }
                gameState.gameLoopId = requestAnimationFrame(gameLoop);
            }
            
            // 立即开始第一帧
            gameLoop();
        }

        // 更新游戏状态
        function update() {
            // 移动球
            gameState.ball.x += gameState.ball.dx;
            gameState.ball.y += gameState.ball.dy;
            
            // 墙壁碰撞检测
            if (gameState.ball.x - gameState.ball.radius <= 0 || gameState.ball.x + gameState.ball.radius >= gameState.gameWidth) {
                gameState.ball.dx = -gameState.ball.dx;
                createParticles(gameState.ball.x, gameState.ball.y, 'wall');
            }
            
            if (gameState.ball.y - gameState.ball.radius <= 0) {
                gameState.ball.dy = -gameState.ball.dy;
                createParticles(gameState.ball.x, gameState.ball.y, 'wall');
            } else if (gameState.ball.y + gameState.ball.radius >= gameState.gameHeight - 20) { // 调整到底部边界，留出控制栏空间
                // 检测挡板碰撞（挡板在底部上方20px）
                const paddleBottom = gameState.gameHeight - 20;
                if (gameState.ball.y + gameState.ball.radius >= paddleBottom && 
                    gameState.ball.x >= gameState.paddle.x - gameState.paddle.width / 2 && 
                    gameState.ball.x <= gameState.paddle.x + gameState.paddle.width / 2) {
                    
                    // 根据碰撞位置调整角度
                    const hitPos = (gameState.ball.x - gameState.paddle.x) / (gameState.paddle.width / 2);
                    gameState.ball.dy = -Math.abs(gameState.ball.dy);
                    gameState.ball.dx = hitPos * 3;
                    
                    createParticles(gameState.ball.x, gameState.ball.y, 'paddle');
                } else if (gameState.ball.y + gameState.ball.radius >= gameState.gameHeight) {
                    // 当球完全越过底部边界时，失去一条生命
                    loseLife();
                }
            }
            
            // 砖块碰撞检测
            checkBrickCollisions();
            
            // 移动挡板
            movePaddle();
            
            // 更新火焰模式
            updateFireMode();
        }

        // 检查砖块碰撞
        function checkBrickCollisions() {
            for (let i = 0; i < gameState.bricks.length; i++) {
                const brick = gameState.bricks[i];
                if (brick.status === 1) {
                    const ballLeft = gameState.ball.x - gameState.ball.radius;
                    const ballRight = gameState.ball.x + gameState.ball.radius;
                    const ballTop = gameState.ball.y - gameState.ball.radius;
                    const ballBottom = gameState.ball.y + gameState.ball.radius;
                    
                    const brickLeft = brick.x;
                    const brickRight = brick.x + gameState.brickWidth;
                    const brickTop = brick.y;
                    const brickBottom = brick.y + gameState.brickHeight;
                    
                    if (ballRight >= brickLeft && ballLeft <= brickRight && 
                        ballBottom >= brickTop && ballTop <= brickBottom) {
                        
                        // 确定碰撞方向
                        const overlapLeft = ballRight - brickLeft;
                        const overlapRight = brickRight - ballLeft;
                        const overlapTop = ballBottom - brickTop;
                        const overlapBottom = brickBottom - ballTop;
                        
                        const minOverlap = Math.min(overlapLeft, overlapRight, overlapTop, overlapBottom);
                        
                        if (minOverlap === overlapLeft || minOverlap === overlapRight) {
                            gameState.ball.dx = -gameState.ball.dx;
                        } else {
                            gameState.ball.dy = -gameState.ball.dy;
                        }
                        
                        // 移除砖块
                        brick.status = 0;
                        brick.element.classList.add('hit');
                        
                        // 增加得分
                        gameState.score += 10;
                        elements.scoreDisplay.textContent = gameState.score;
                        
                        // 创建爆炸粒子
                        createParticles(brick.x + gameState.brickWidth / 2, brick.y + gameState.brickHeight / 2, 'brick', brick.color);
                        
                        // 随机激活火焰模式
                        if (Math.random() > 0.8) {
                            activateFireMode();
                        }
                        
                        // 检查是否所有砖块都被消除
                        checkWin();
                    }
                }
            }
        }

        // 检查是否获胜
        function checkWin() {
            const remainingBricks = gameState.bricks.filter(brick => brick.status === 1);
            if (remainingBricks.length === 0) {
                // 进入下一关
                initializeBricks();
                resetBallAndPaddle();
                
                // 增加球速
                gameState.ball.dx *= 1.1;
                gameState.ball.dy *= 1.1;
            }
        }

        // 失去生命
        function loseLife() {
            gameState.lives--;
            
            // 更新生命值显示
            elements.livesDisplay.textContent = '❤️'.repeat(gameState.lives);
            
            if (gameState.lives <= 0) {
                gameOver();
            } else {
                resetBallAndPaddle();
            }
        }

        // 游戏结束
        function gameOver() {
            gameState.isGameOver = true;
            gameState.isGameStarted = false;
            saveHighScore();
            
            // 更新结束界面
            elements.finalScoreDisplay.textContent = gameState.score;
            elements.recordMessage.style.display = gameState.isNewRecord ? 'block' : 'none';
            elements.gameOverOverlay.style.display = 'block';
            elements.pauseBtn.disabled = true;
            
            // 停止游戏循环
            if (gameState.gameLoopId) {
                cancelAnimationFrame(gameState.gameLoopId);
            }
        }

        // 移动挡板
        function movePaddle() {
            const paddleSpeed = 7;
            
            if (gameState.leftPressed && gameState.paddle.x - gameState.paddle.width / 2 > 0) {
                gameState.paddle.x -= paddleSpeed;
            }
            if (gameState.rightPressed && gameState.paddle.x + gameState.paddle.width / 2 < gameState.gameWidth) {
                gameState.paddle.x += paddleSpeed;
            }
        }

        // 激活火焰模式
        function activateFireMode() {
            gameState.isFireMode = true;
            gameState.fireModeTimer = 10000; // 10秒
            elements.ball.classList.add('fire-effect');
        }

        // 更新火焰模式
        function updateFireMode() {
            if (gameState.isFireMode) {
                gameState.fireModeTimer -= 16.67; // 约60fps
                if (gameState.fireModeTimer <= 0) {
                    gameState.isFireMode = false;
                    elements.ball.classList.remove('fire-effect');
                }
            }
        }

        // 创建粒子效果
        function createParticles(x, y, type, color = '#fff') {
            const particleCount = type === 'brick' ? 12 : 8;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                particle.style.left = `${x}px`;
                particle.style.top = `${y}px`;
                
                // 根据类型设置颜色
                if (type === 'brick') {
                    particle.style.backgroundColor = color;
                } else if (type === 'wall') {
                    particle.style.backgroundColor = '#3498db';
                } else if (type === 'paddle') {
                    particle.style.backgroundColor = '#e74c3c';
                }
                
                elements.gameArea.appendChild(particle);
                
                // 随机速度和方向
                const angle = (i / particleCount) * Math.PI * 2;
                const speed = Math.random() * 4 + 2;
                const vx = Math.cos(angle) * speed;
                const vy = Math.sin(angle) * speed;
                
                // 动画粒子
                let lifetime = 100;
                const animateParticle = () => {
                    if (lifetime <= 0) {
                        particle.remove();
                        return;
                    }
                    
                    const rect = particle.getBoundingClientRect();
                    const gameRect = elements.gameArea.getBoundingClientRect();
                    
                    let newX = rect.left - gameRect.left + vx;
                    let newY = rect.top - gameRect.top + vy;
                    
                    // 边界检测
                    if (newX < 0 || newX > gameState.gameWidth) vx = -vx * 0.8;
                    if (newY < 0 || newY > gameState.gameHeight) vy = -vy * 0.8;
                    
                    particle.style.left = `${newX}px`;
                    particle.style.top = `${newY}px`;
                    
                    // 逐渐减小透明度
                    particle.style.opacity = lifetime / 100;
                    particle.style.transform = `scale(${lifetime / 100})`;
                    
                    lifetime -= 5;
                    requestAnimationFrame(animateParticle);
                };
                
                animateParticle();
            }
        }

        // 渲染游戏
        function render() {
            // 更新球的位置
            elements.ball.style.left = `${gameState.ball.x}px`;
            elements.ball.style.top = `${gameState.ball.y}px`;
            
            // 更新挡板位置
            elements.paddle.style.left = `${gameState.paddle.x}px`;
        }

        // 绑定事件
        function bindEvents() {
            // 鼠标移动控制挡板
            elements.gameArea.addEventListener('mousemove', (e) => {
                if (!gameState.isGameStarted || gameState.isPaused || gameState.isGameOver) return;
                
                const rect = elements.gameArea.getBoundingClientRect();
                const relativeX = e.clientX - rect.left;
                
                if (relativeX >= gameState.paddle.width / 2 && relativeX <= gameState.gameWidth - gameState.paddle.width / 2) {
                    gameState.paddle.x = relativeX;
                }
            });
            
            // 键盘事件
            window.addEventListener('keydown', (e) => {
                if (e.key === 'ArrowLeft') {
                    gameState.leftPressed = true;
                } else if (e.key === 'ArrowRight') {
                    gameState.rightPressed = true;
                } else if (e.key === ' ') {
                    e.preventDefault();
                    if (gameState.isGameStarted && !gameState.isGameOver) {
                        togglePause();
                    }
                } else if (e.key === 'Enter') {
                    if (!gameState.isGameStarted || gameState.isGameOver) {
                        startGame();
                    }
                }
            });
            
            window.addEventListener('keyup', (e) => {
                if (e.key === 'ArrowLeft') {
                    gameState.leftPressed = false;
                } else if (e.key === 'ArrowRight') {
                    gameState.rightPressed = false;
                }
            });
            
            // 按钮事件
            elements.startBtn.addEventListener('click', startGame);
            elements.restartBtn.addEventListener('click', startGame);
            elements.restartGameBtn.addEventListener('click', restartGame);
            elements.pauseBtn.addEventListener('click', togglePause);
        }

        // 启动游戏
        document.addEventListener('DOMContentLoaded', initGame);
    </script>
</body>
</html>